<template>
  <div class="bidDetail-wrapper">
    <Breadcrumb>
      <BreadcrumbItem to="/">首页</BreadcrumbItem>
      <BreadcrumbItem to="/goods?type=bid">拍卖会场</BreadcrumbItem>
      <BreadcrumbItem :to="'/goods?type=bid&cate_id=' + bidData.cate_id">{{
        bidData.cate.name
      }}</BreadcrumbItem>
      <BreadcrumbItem>{{ bidData.title }}</BreadcrumbItem>
    </Breadcrumb>
    <div class="bidDetail-container">
      <img :src="bidData.image_src" />
      <div class="bidDetail-content">
        <span id="detail-title">{{ bidData.title }}</span>
        <!-- <div class="detail-divider" /> -->
        <br />

        <Tag :color="tagType" size="large">{{ tagText }}</Tag>
        {{ countdownText }}
        <countdown
          v-if="bidData.start_time"
          :startTime="bidData.start_time"
          :endTime="bidData.end_time"
          @status="handleStatus"
        ></countdown>

        <!-- 拍卖已结束 -->
        <div class="price-container" v-if="this.tagText == '已结束'">
          <div class="closed-box">
            <div id="title" v-if="bidData.bid_count !== 0">
              <Icon custom="iconfont icon-paimai" size="30" />&nbsp;拍卖已成交
            </div>
            <div id="title" v-else>
              <Icon custom="iconfont icon-paimai" size="30" />&nbsp;拍卖已流拍
            </div>
            <div v-if="bidData.bid_count !== 0">
              成交价
              <span class="price-tag" style="color: #c0392b"
                >￥{{
                  bidData.max_price ? bidData.max_price : bidData.init_price
                }}</span
              >
            </div>
          </div>
        </div>

        <!-- 拍卖未结束 -->
        <div class="price-container" v-else>
          <div>
            当前价
            <span class="price-tag" style="color: #c0392b"
              >￥{{
                bidData.max_price ? bidData.max_price : bidData.init_price
              }}</span
            >&nbsp; ( <span style="color: #c0392b">{{ bidData.bid_count }}</span
            >次出价)
          </div>
          <div>
            出价金额
            <InputNumber
              style="font-size: 20px;width: 100px"
              :min="minPrice"
              v-model="price"
              size="large"
              :step="bidData.min_gap"
            ></InputNumber>
          </div>

          <Tooltip
            :content="bidButtonDesc"
            :disabled="!bidButtonStatus"
            max-width="300"
            theme="light"
            placement="right"
            v-if="this.tagText !== '未开始'"
          >
            <Button
              shape="circle"
              size="large"
              type="error"
              style="width: 150px"
              :loading="loading"
              @click="handleBid()"
              :disabled="bidButtonStatus"
            >
              <span v-if="!loading">
                <Icon custom="iconfont icon-paimai" size="20" />&nbsp;出 价
              </span>
              <span v-else>处理中...</span>
            </Button>
          </Tooltip>

          <Button
            v-else
            shape="circle"
            size="large"
            disabled
            style="width: 150px"
          >
            <Icon custom="iconfont icon-paimai" size="20" />&nbsp;暂未开始
          </Button>
        </div>
        <Collapse simple>
          <Panel name="1">
            商品简介
            <p slot="content">{{ bidData.desc }}</p>
          </Panel>
          <Panel name="2">
            价格详情
            <div class="price-info-box" slot="content">
              <div>起拍价：￥{{ bidData.init_price }} <br />佣&nbsp;金: 无</div>
              <div>加价幅度：￥{{ bidData.min_gap }} <br />延时周期：0</div>
              <div>
                保证金：￥0
                <br />保留价: 无保留价
              </div>
            </div>
          </Panel>
          <Panel name="3">
            送拍店家
            <div class="price-info-box" slot="content">
              <div>
                店铺名称：
                <router-link :to="'/space/' + bidData.craftsman.user_id">{{
                  bidData.craftsman.shop_name
                }}</router-link>
              </div>
              称号：{{ bidData.craftsman.rank }}
            </div>
          </Panel>
        </Collapse>

        <br />

        <span>
          分类：
          <a href="/goods?type=bid">拍卖会场</a>,
          <a :href="'/goods?type=bid&cate_id=' + bidData.cate_id">{{
            bidData.cate.name
          }}</a>
        </span>
      </div>
      <div class="bid-list-container">
        <Timeline v-if="this.tagText !== '未开始'">
          <TimelineItem>
            <Icon custom="iconfont icon-kaishijingjia" size="24" slot="dot" />
            <div class="timeline-content">
              <strong>竞拍开始</strong>
              <br />
              <span id="timeline-time">{{ bidData.start_time }}</span>
            </div>
          </TimelineItem>
          <TimelineItem v-for="(record, index) in bidData.bid" :key="index">
            <Avatar
              :style="{ background: getRandomColor() }"
              size="small"
              slot="dot"
              >{{ usernameFormat(record.user.username) }}</Avatar
            >
            <div class="timeline-content">
              出价：
              <span id="price-tag">￥{{ record.price }}</span>
              <br />
              <span id="timeline-time">{{ record.bid_time }}</span>
            </div>
          </TimelineItem>
          <TimelineItem v-show="this.tagText == '已结束' && bidData">
            <Icon custom="iconfont icon-paimai" size="24" slot="dot" />
            <div class="timeline-content">
              <strong v-if="bidData.bid_count == 0">流拍</strong>
              <strong v-else>成交</strong>
              <br />
              <span id="timeline-time">{{ bidData.end_time }}</span>
            </div>
          </TimelineItem>
        </Timeline>
        <div v-else class="bid-list-default">暂未开始</div>
      </div>
    </div>
    <div class="bid-flow">
      <strong>竞拍流程</strong>
      <Steps :current="0">
        <Step title="出价竞拍">
          <template slot="icon">
            <Icon custom="iconfont icon-paimai" size="24" color="#bf9e27" />
          </template>
        </Step>
        <Step title="竞拍成功">
          <template slot="icon">
            <Icon custom="iconfont icon-chenggong" size="24" color="#bf9e27" />
          </template>
        </Step>
        <Step title="支付货款">
          <template slot="icon">
            <Icon custom="iconfont icon-zhifubao" size="24" color="#bf9e27" />
          </template>
        </Step>
        <Step title="完成收货">
          <template slot="icon">
            <Icon custom="iconfont icon-daishouhuo" size="24" color="#bf9e27" />
          </template>
        </Step>
      </Steps>
    </div>
  </div>
</template>

<script>
import { getBasicInfo, AuthCheck } from '../utils/mixin';
import _ from 'lodash';

export default {
  name: 'bid_detail',
  components: {
    Countdown: () => import('@/components/Countdown'),
  },
  data() {
    return {
      bidData: { cate: '', craftsman: '' },
      loading: false,
      tagType: 'primary',
      tagText: '',
      countdownText: '',
      price: 0,
      minPrice: 0,
      colorList: [
        '#16a085',
        '#27ae60',
        '#2980b9',
        '#8e44ad',
        '#34495e',
        '#f39c12',
        '#d35400',
        '#c0392b',
      ],
    };
  },
  mixins: [getBasicInfo, AuthCheck],
  computed: {
    bidButtonStatus() {
      let last = _.last(this.bidData.bid);
      if (last)
        if (
          this.bidData.craftsman_id == this.getCid || // 若该拍卖品匠人id与登录用户匠人id一致
          last.user_id == this.getUid || // 最近一次拍卖纪录用户与登录用户一致
          this.tagType == 'default' // 拍卖已结束
        )
          // 解决 Cannot read property 'user_id' of undefined 错误
          return true;
      return false;
    },
    bidButtonDesc() {
      if (this.tagType == 'default') return '该拍卖已结束';
      else if (this.bidData.craftsman_id == this.getCid)
        return '您不可购买自己发布的拍卖品哦！';
      else return '您不可以连续竞拍同一件拍卖品哦';
    },
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.axios
        .get(`/api/bid_goods?item=${this.$route.params.id}`)
        .then((res) => {
          this.bidData = res.data;
          this.minPrice =
            parseInt(this.bidData.max_price) + parseInt(this.bidData.min_gap);
          this.price = this.minPrice;
        })
        .catch((err) => this.$Message.error(err));
    },
    handleBid() {
      if (!this.checkLogin()) {
        this.$Message.error('请先登录后再进行操作');
        return;
      }
      this.loading = true;
      this.axios
        .post('/api/bid', {
          bid_goods_id: this.bidData.id,
          user_id: parseInt(this.getUid),
          price: this.price,
        })
        .then((res) => {
          this.fetchData();
          this.$Notice.success({
            title: '竞价成功',
          });
          this.loading = false;
        })
        .catch((err) => console.log(err));
    },
    handleStatus(status) {
      switch (status) {
        case 0:
          (this.countdownText = '距开始：'),
            (this.tagType = 'warning'),
            (this.tagText = '未开始');
          break;
        case 1:
          (this.countdownText = '距结束：'),
            (this.tagType = 'error'),
            (this.tagText = '正在拍卖');
          break;
        default:
          (this.countdownText = '结束时间'),
            (this.tagType = 'default'),
            (this.tagText = '已结束');
          break;
      }
    },
    usernameFormat: (name) =>
      _.toUpper(_.truncate(name, { length: 1, omission: '' })),

    getRandomColor() {
      return this.colorList[_.random(0, 7)];
    },
  },
};
</script>
